<template>
	<el-dialog
		:title="$t('game.game_betslip.note_details')"
		:visible="isDialogVisible"
		width="1200px"
		:before-close="handleClose"
		@close="handleClose"
	>
		<div
			class="review-content"
			v-loading="detailLoading"
			element-loading-spinner="el-icon-loading"
		>
			<div class="main-content">
				<div class="review-content">
					<el-descriptions title="投注人信息" :column="2">
						<el-descriptions-item label="账号类型" :span="2">
							{{
								typeFilter(
									betSlipDetail.accountType,
									'accountType'
								)
							}}
						</el-descriptions-item>
						<el-descriptions-item label="游戏账号">
							{{ betSlipDetail.playerName }}
						</el-descriptions-item>
						<el-descriptions-item label="该类游戏总输赢">
							<span
								:style="
									handleNumberColor(
										betSlipDetail.netAmountSum
									)
								"
							>
								{{
									handleCurrency(betSlipDetail.memberCurrency)
								}}
								{{
									handleNumber(
										betSlipDetail.memberCurrency,
										betSlipDetail.netAmountSum
									)
								}}
							</span>
						</el-descriptions-item>
					</el-descriptions>

					<el-divider></el-divider>
					<el-descriptions title="注单信息" :column="4">
						<el-descriptions-item label="注单号" class="space">
							{{ betSlipDetail.id }}
						</el-descriptions-item>
						<el-descriptions-item label="注单类型">
							{{ betSlipDetail.parentOrderTypeDesc || '-' }}
						</el-descriptions-item>
						<el-descriptions-item label="注单子类" :span="2">
							{{ betSlipDetail.betTypeDesc || '-' }}
						</el-descriptions-item>

						<el-descriptions-item label="牌桌所属俱乐部ID">
							{{ betSlipDetail.clubId }}
						</el-descriptions-item>
						<el-descriptions-item label="牌桌号">
							{{ betSlipDetail.tableCode }}
						</el-descriptions-item>
						<el-descriptions-item label="牌桌名称">
							{{ betSlipDetail.tableName }}
						</el-descriptions-item>
						<el-descriptions-item label="玩法名称">
							{{ typeFilter(betSlipDetail.gameType, 'gameType') }}
						</el-descriptions-item>

						<el-descriptions-item label="手牌号">
							{{ betSlipDetail.handCode }}
						</el-descriptions-item>
						<el-descriptions-item label="投注金额">
							{{ handleCurrency(betSlipDetail.memberCurrency) }}
							{{
								handleNumber(
									betSlipDetail.memberCurrency,
									betSlipDetail.betAmount
								)
							}}
						</el-descriptions-item>
						<el-descriptions-item label="有效投注">
							{{ handleCurrency(betSlipDetail.memberCurrency) }}
							{{
								handleNumber(
									betSlipDetail.memberCurrency,
									betSlipDetail.validBetAmount
								)
							}}
						</el-descriptions-item>
						<el-descriptions-item label="未抽水输赢">
							<span v-if="betSlipDetail.betType === 1">
								{{
									handleNumber(
										betSlipDetail.memberCurrency,
										betSlipDetail.grossProfit
									)
								}}
							</span>
							<span v-else>-</span>
						</el-descriptions-item>
						<el-descriptions-item label="手牌服务费">
							<span v-if="betSlipDetail.betType === 1">
								{{
									handleNumber(
										betSlipDetail.memberCurrency,
										betSlipDetail.userHandFee
									)
								}}
							</span>
							<span v-else>-</span>
						</el-descriptions-item>
						<el-descriptions-item label="输赢金额">
							<span
								:style="
									handleNumberColor(betSlipDetail.netAmount)
								"
							>
								{{
									handleCurrency(betSlipDetail.memberCurrency)
								}}
								{{
									handleNumber(
										betSlipDetail.memberCurrency,
										betSlipDetail.netAmount
									)
								}}
							</span>
						</el-descriptions-item>

						<el-descriptions-item label="服务费贡献">
							{{
								handleNumber(
									betSlipDetail.memberCurrency,
									betSlipDetail.pumpContribution
								)
							}}
						</el-descriptions-item>
						<el-descriptions-item label="投注IP">
							{{ betSlipDetail.loginIp }}
						</el-descriptions-item>
						<el-descriptions-item label="投注时间">
							{{ betSlipDetail.handBeginDate }}
						</el-descriptions-item>
						<el-descriptions-item label="投注终端">
							<span>
								{{
									typeFilter(
										betSlipDetail.obDeviceType,
										'gameDeviceType'
									)
								}}
							</span>
						</el-descriptions-item>

						<el-descriptions-item label="结算状态">
							<span>
								{{
									obBetStatusEnum[
										betSlipDetail.obBetStatus
									] || '-'
								}}
							</span>
						</el-descriptions-item>
						<el-descriptions-item label="结算时间">
							{{ betSlipDetail.handEndDate }}
						</el-descriptions-item>
					</el-descriptions>
				</div>
			</div>
		</div>

		<div class="arrowStyel">
			<el-link
				type="primary"
				:underline="false"
				@click="handlePrevOrNext(1)"
				:disabled="detailLoading || currentRecordIndex === 0"
			>
				<i class="el-icon-d-arrow-left"></i>
				{{ $t('game.game_betslip.previous') }}
			</el-link>
			<div>
				<el-button
					type="primary"
					:disabled="detailLoading"
					@click.native="handleClose"
				>
					{{ $t('member.close') }}
				</el-button>
			</div>
			<el-link
				type="primary"
				:underline="false"
				@click="handlePrevOrNext(2)"
				:disabled="
					detailLoading || currentRecordIndex >= recordLength - 1
				"
			>
				{{ $t('game.game_betslip.next') }}
				<i class="el-icon-d-arrow-right"></i>
			</el-link>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'

export default {
	mixins: [list],
	props: {
		// value: Boolean,
		// activeIndex: { type: Number, default: 0 },
		// disabledNext: Boolean,
		// disabledPrev: Boolean,
		isDialogVisible: Boolean,
		detailLoading: Boolean,
		recordLength: { type: Number, default: 0 },
		currentRecordIndex: { type: Number, default: 0 },
		betSlipDetail: { type: Object, default: {} }
	},
	data() {
		return {
			obBetStatusEnum: {
				0: '未结算',
				1: '已结算',
				2: '不结算'
			}
		}
	},
	methods: {
		// 关闭
		handleClose() {
			this.$emit('update:isDialogVisible', false)
		},
		// 获取上一条下一条
		handlePrevOrNext(type) {
			// type 1上一条 2下一条
			this.$emit('getPrevAndNextBetSlip', type)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-row {
	height: 45px;
}
.review-flex {
	position: relative;
	width: 100%;
	margin-top: 15px;
	div {
		display: inline-block;
		width: 24%;
	}
}
.detail-img {
	width: 80px;
	height: 80px;
	margin-left: 20px;
	margin-right: 20px;
	display: inline-block;
}
.space {
	line-height: 50px;
}
.img-div {
	width: 100% !important;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.review-content {
	width: 100%;
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-size: 16px;
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			border-top: 0px;
			padding: 30px;
			.name {
				font-weight: 600;
			}
			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 10px;
				div {
					display: inline-block;
					width: 24%;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
	.img-title {
		margin-top: 10px;
		font-size: 14px;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.847058823529412);
	}
}

.arrowStyel {
	display: flex;
	justify-content: space-around;
}
</style>
